<template>
  <div class="UpFile">
    <el-upload
      class="upload-demo"
      action=""
      :accept="accept"
      :auto-upload="false"
      :modal-append-to-body="false"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
      :file-list="fileList"
      :limit="limit"
      :multiple="multiple"
      :on-exceed="onExceed"
      drag
    >
      <div class="UpFile-nav">
        <div>
          <img class="UpFile-nav-img" src="~@/assets/images/common/icon_upfile.png" alt="">
          <div class="UpFile-nav-text">{{ text }}</div>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    defaultFileList: {
      default: () => [],
      type: Array
    },
    limit: {
      type: Number,
      default: 1
    },
    text: {
      type: String,
      default: '上传文件'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    cardType: {
      type: String,
      default: 'card'
    },
    accept: {
      type: String,
      default: ''
    },
    returnType: {
      type: String,
      default: 'fileList'
    },
    classStyle: {
      type: String,
      default: 'upLoadNone'
    },
    formKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      formData: {}
    }
  },
  computed: {
    ...mapGetters([])
  },
  watch: {
    defaultFileList: {
      handler(newval, oldval) {
        this.fileList = JSON.parse(JSON.stringify(this.defaultFileList))
      },
      immediate: true
    }
  },
  methods: {
    onExceed() {
      this.$message.error('超出文件最大上传数量')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 15
      if (!isLt2M) {
        this.$message.error('上传文件不能超过 15MB!')
      }
      return isLt2M
    },
    handleChange(file, fileList) {
      this.fileList = fileList
      this.hideUploadBtn = fileList.length >= this.limit
      if (this.returnType == 'fileList') {
        this.$emit('changeFile', this.fileList, this.formKey)
      } else {
        this.$emit('changeFile', file, this.formKey)
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
      this.hideUploadBtn = fileList.length >= this.limit
      this.$emit('changeFile', this.fileList, this.formKey)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.UpFile {
  ::v-deep {
    .el-upload {
      width: 100%;

      .el-upload-dragger {
        width: 100%;
        height: 125px;
        border-color: #37A6E5;
      }
    }
  }

  &-nav {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &-img {
      width: 50px;
      height: 50px;
      margin-bottom: 5px;
    }
  }
}
</style>
